<template>
  <el-card>
    <div slot="header">
      <div class="categary-header">
        <span>销售额占比</span>
        <el-radio-group v-model="value">
          <el-radio-button label="淘宝"></el-radio-button>
          <el-radio-button label="天猫"></el-radio-button>
          <el-radio-button label="阿里"></el-radio-button>
          <el-radio-button label="京东"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      value: '淘宝',
    }
  },
  mounted() {
    // 初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    // 配置数据
    lineCharts.setOption(
      {
        title: {
          text: '销售额占比',
          subtext: '电商系统数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '书籍'},
              {value: 735, name: '游戏'},
              {value: 580, name: '电脑'},
              {value: 484, name: '手机'},
              {value: 300, name: '汽车'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    )
  }
}
</script>

<style scoped>
.categary-header {
  display: flex;
  justify-content: space-between;
}
</style>
